import React, { useState } from 'react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import './css/jifen.scss'

export default function JiFen() {
    const navigate = useNavigate()
    const [flag, setFlag] = useState(true)
    const [flag1, setFlag1] = useState(true)
    return (
        <div className='jf_box'>
            <div className='header'>
                <NavBar
                    back={<ArrowLeft />}
                    right={
                        <>
                            <span onClick={(e) => Toast.show('编辑')}>明细</span>
                        </>
                    }
                    onBackClick={(e) => { Toast.show('返回'); navigate('/miaosha') }}
                >
                    <span onClick={(e) => Toast.show('标题')}>积分</span>
                </NavBar>
            </div>
            <div className='body'>
                <div className='jf'>
                    <div className='green_bg'>
                        <div className='jj'>
                            <p className='p1'><span className='num'>1822</span>积分</p>
                            <p className='p2'>1800积分将于2024-10-1失效</p>
                        </div>
                    </div>
                    <div className='qiandao'>
                        <p className='p'>连签30天，共可获得60元</p>
                        <div className='day'>
                            <div className='hui'>
                                <img src='./imgs/logo3.png' alt='' width='22px'></img>
                                <p>1天</p>
                            </div>
                            <div className='hui'>
                                <img src='./imgs/logo3.png' alt='' width='22px'></img>
                                <p>2天</p>
                            </div>
                            <div className='ju'>
                                <img src='./imgs/logo1.png' alt='' width='22px'></img>
                                <p>3天</p>
                            </div>
                            <div className='ju'>
                                <img src='./imgs/logo1.png' alt='' width='22px'></img>
                                <p>4天</p>
                            </div>
                            <div className='ju'>
                                <img src='./imgs/logo1.png' alt='' width='22px'></img>
                                <p>5天</p>
                            </div>
                            <div className='hong'>
                                <img src='./imgs/logo2.png' alt='' width='22px'></img>
                                <p>6天</p>
                            </div>
                            <div className='ju'>
                                <img src='./imgs/logo1.png' alt='' width='22px'></img>
                                <p>7天</p>
                            </div>
                        </div>
                        <button className={flag ? '' : 'dis'} onClick={() => { Toast.show('签到成功！'); setFlag(false) }}>{flag ? '立即签到' : '今日已签到，明天再来吧~'} </button>
                    </div>
                </div>
                <div className='dui'>
                    <div className='box'>
                        <p>积分超值兑换<span>每天0点开抢</span></p>
                        <div className='quan_box'>
                            <div className='quan'>
                                <div className='item'>
                                    <img src='./imgs/bg.png' alt=''></img>
                                    <p className='p1'><span>￥</span>3</p>
                                    <p className='p2'>满3.01可用</p>
                                </div>
                                <div className='right'>
                                    <p>3元无门槛优惠券</p>
                                    <p><span>限量</span><span>300积分兑换</span></p>
                                    <p className='p3'>兑换后7日有效</p>
                                </div>
                                <div className='btn'>
                                    <button className={flag1 ? '' : 'dis'} onClick={() => { Toast.show('兑换成功！'); setFlag1(false) }}>{flag1 ? '兑换' : '已抢完'}</button>
                                </div>
                            </div>
                            <div className='quan'>
                                <div className='item'>
                                    <img src='./imgs/bg.png' alt=''></img>
                                    <p className='p1'><span>￥</span>5</p>
                                    <p className='p2'>满5.01可用</p>
                                </div>
                                <div className='right'>
                                    <p>5元无门槛优惠券</p>
                                    <p><span>限量</span><span>500积分兑换</span></p>
                                    <p className='p3'>兑换后7日有效</p>
                                </div>
                                <div className='btn'>
                                    <button disabled style={{ backgroundColor: '#ccc' }}>已抢完</button>
                                </div>
                            </div>
                            <div className='quan'>
                                <div className='item'>
                                    <img src='./imgs/bg.png' alt=''></img>
                                    <p className='p1'><span>￥</span>8</p>
                                    <p className='p2'>满8.01可用</p>
                                </div>
                                <div className='right'>
                                    <p>3元无门槛优惠券</p>
                                    <p><span>限量</span><span>800积分兑换</span></p>
                                    <p className='p3'>兑换后7日有效</p>
                                </div>
                                <div className='btn'>
                                    <button disabled style={{ backgroundColor: '#ccc' }}>已抢完</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
